{include file="public/header-static"/}
{include file="public/sidebar"/}
<style>
    .mar_bom{margin-bottom: 25px;}
</style>
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row" >

                        <div class="col-md-8">
                            <div class="card bor" style="height: calc( 100% - 15px );">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">企业微信</div>
                                        <div class="u-rig">
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="k"></text>
                                                    <text class="str">企业微信总数</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$weChat_data.weChatCountArticle}
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="h"></text>
                                                    <text class="str">当月新增数量</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$weChat_data.weChatArticleMonthCreate}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <canvas id="post" height="58"></canvas>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-4">
                            <div class="card bor"  style="height: calc( 100% - 15px );">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">访问数据</div>
                                    </div>
                                    <div class="d-fix">
                                        <div class="total-d">
                                            <div class="u-left mt-top">
                                                <div class="bg-txt">
                                                    <text class="k color-total"></text>
                                                    <text class="str">总访问量</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$weChat_data.weChatArticleCountViews}</text>
                                                    次
                                                </div>
                                            </div>
                                            <div class="u-left mar_bom">
                                                <div class="bg-txt">
                                                    <text class="h color-y"></text>
                                                    <text class="str">当月访问量</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$weChat_data.weChatArticleMonthCountViews}</text>
                                                    次
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="h color-z"></text>
                                                    <text class="str">当天访问量</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$weChat_data.weChatArticleTodayCountViews}</text>
                                                    次
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rig-img">
											<canvas  id="wxData" width="151" height="151"></canvas>
                                            <!-- <img src="__STATIC__/assets/media/image/hx.png"> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="row">

                        <div class="col-md-8">
                            <div class="card bor" style="height: calc( 100% - 15px );">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">社群知识</div>
                                        <div class="u-rig">
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="k"></text>
                                                    <text class="str">社群知识总数</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$lore_data.loreCountArticle}
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="h"></text>
                                                    <text class="str">当月新增数量</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$lore_data.loreArticleMonthCreate}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <canvas id="post1" height="58"></canvas>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-4">
                            <div class="card bor" style="height: calc( 100% - 15px );">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">访问数据</div>
                                    </div>
                                    <div class="d-fix">
                                        <div class="total-d">
                                            <div class="u-left mt-top">
                                                <div class="bg-txt">
                                                    <text class="k color-total"></text>
                                                    <text class="str">总访问量</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$lore_data.loreArticleCountViews}</text>
                                                    次
                                                </div>
                                            </div>
                                            <div class="u-left mar_bom">
                                                <div class="bg-txt">
                                                    <text class="h color-y"></text>
                                                    <text class="str">当月访问量</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$lore_data.loreArticleMonthCountViews}</text>
                                                    次
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="h color-z"></text>
                                                    <text class="str">当天访问量</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$lore_data.loreArticleTodayCountViews}</text>
                                                    次
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rig-img">
											<canvas  id="knowledgeData" width="151" height="151"></canvas>
                                            <!-- <img src="__STATIC__/assets/media/image/hx.png"> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="row">

                        <div class="col-md-8">
                            <div class="card bor" style="height: calc( 100% - 15px );">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">社群案例</div>
                                        <div class="u-rig">
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="k"></text>
                                                    <text class="str">社群案例总数</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$case_data.caseCountArticle}
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="h"></text>
                                                    <text class=style="height: calc( 100% - 15px );""str">当月新增数量</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$case_data.caseArticleMonthCreate}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <canvas id="post2" height="58"></canvas>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-4">
                            <div class="card bor" style="height: calc( 100% - 15px );">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">访问数据</div>
                                    </div>
                                    <div class="d-fix">
                                        <div class="total-d">
                                            <div class="u-left mt-top">
                                                <div class="bg-txt">
                                                    <text class="k color-total"></text>
                                                    <text class="str">总访问量</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$case_data.caseArticleCountViews}</text>
                                                    次
                                                </div>
                                            </div>
                                            <div class="u-left mar_bom">
                                                <div class="bg-txt">
                                                    <text class="h color-y"></text>
                                                    <text class="str">当月访问量</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$case_data.caseArticleMonthCountViews}</text>
                                                    次
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="h color-z"></text>
                                                    <text class="str">当天访问量</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$case_data.caseArticleTodayCountViews}</text>
                                                    次
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rig-img">
											<canvas  id="communityData" width="151" height="151"></canvas>
                                            <!-- <img src="__STATIC__/assets/media/image/hx.png"> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>

<script>
// 企业微信数据
        var chartDom = document.getElementById('wxData');
	    var myChart = echarts.init(chartDom);
	    var option = {
	          title: '', 
			  tooltip: {
                trigger: 'item',
			  },
			   legend: {
                    orient: 'vertical',
					top: '10%',
					left: '10%',
                    // y:'center',
                    itemWidth : 12,
                    itemHeight : 12,
                    itemGap: 25,
                    textStyle:{
                        color : '#000',
                        fontWeight : 'bold',
                        fontSize: 18,
                        width:20,
                        height:20,
                        rich:{
                            a: {
                                color: '#999',
                                lineHeight: 20,
                            },
                            b:{
                                fontSize:16
                            }
                        }
                    }
				},
	        //    color: ['#5B78FFFF',  '#E6A500FF'],  //手动设置每个图例的颜色
	           //环形中间文字
	           graphic: [
	               //第一行文字
	               //内容 + 位置
	               {
	                   type: 'text',
	                   left: '29%',
	                   top: '40%',
	                   style: {
	                       //value当前进度
	                    //    text: "9998",
	                       textAlign: 'center',
	                       fill: '#19191A',
	                       fontSize: 34,
	                       fontWeight: 'bold'
	                   }
	               },
	               //第二行文字
	               //内容 + 位置
	               {
	                   type: 'text',
	                   left: '34%',
	                   top: '56%',
	                   style: {
	                       //maxValue进度条最大值
	                    //    text: '总收入',
	                       textAlign: 'center',
	                       fill: '#19191A',
	                       fontSize: 16
	                   }
	               }
	           ],
	           series: [ //系列列表
                    {
                        type: 'pie',
                        radius: ['80%', '70%'],//['外圆大小', '内圆大小']
                        center: ['60%', '50%'],//圆心位置['左右'， '上下']
                        hoverAnimation: false,//取消鼠标悬停动画
                        animationEasing: 'cubicOut',//设置动画缓动效果
                        //取消显示饼图自带数据线条
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label:{
						 show: false,
						 position: 'left'
					    },
                        //增加阴影效果
                        itemStyle: {
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
	                           label: {  //饼图图形上的文本标签
	                               show: false  //平常不显示
	                           },
	                           labelLine: {     //标签的视觉引导线样式
	                               show: false  //平常不显示
	                           }
	                       },
                        },
                        data: [
                            //(maxValue进度条最大值 - value当前进度) + 颜色
                            {
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: '#E0E0E0'
                                    }
                                },
                            },
				            //value当前进度 + 颜色
				            {
				                value: "{$weChat_data.weChatArticleCountViews}",
				                itemStyle: {
				                    normal: {
				                        color: '#5B78FFFF'
				                    }
				                },
                                // name : ''
				            },
                        ]
                    },
                    {
                        type: 'pie',
                        radius: ['50%', '40%'],//['外圆大小', '内圆大小']
                        center: ['60%', '50%'],//圆心位置['左右'， '上下']
                        hoverAnimation: false,//取消鼠标悬停动画
                        animationEasing: 'cubicOut',//设置动画缓动效果
                        //取消显示饼图自带数据线条
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label:{
						 show: false,
						 position: 'left'
					    },
                        //增加阴影效果
                        itemStyle: {
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
	                           label: {  //饼图图形上的文本标签
	                               show: false  //平常不显示
	                           },
	                           labelLine: {     //标签的视觉引导线样式
	                               show: false  //平常不显示
	                           }
	                       },
                        },
                        data: [
                            // 当月访问量
                            {
                                value: "{$weChat_data.weChatArticleMonthCountViews}",
                                itemStyle: {
                                    normal: {
                                        color: '#F74AFF'
                                    }
                                },
                                name: ''


                            },
				            // 当天访问量
				            {
				                value: "{$weChat_data.weChatArticleTodayCountViews}",
				                itemStyle: {
				                    normal: {
				                        color: '#E6A500FF'
				                    }
				                },
                                name: ''
				            },
                        ]
                    },

	           ]
            
	       };
	 myChart.setOption(option);

// 社群知识数据
        var chartDom = document.getElementById('knowledgeData');
	    var myChart = echarts.init(chartDom);
	    var option = {
	          title: '', 
			  tooltip: {
                trigger: 'item',
			  },
			   legend: {
                    orient: 'vertical',
					top: '10%',
					left: '10%',
                    // y:'center',
                    itemWidth : 12,
                    itemHeight : 12,
                    itemGap: 25,
                    textStyle:{
                        color : '#000',
                        fontWeight : 'bold',
                        fontSize: 18,
                        width:20,
                        height:20,
                        rich:{
                            a: {
                                color: '#999',
                                lineHeight: 20,
                            },
                            b:{
                                fontSize:16
                            }
                        }
                    }
				},
	        //    color: ['#5B78FFFF',  '#E6A500FF'],  //手动设置每个图例的颜色
	           //环形中间文字
	           graphic: [
	               //第一行文字
	               //内容 + 位置
	               {
	                   type: 'text',
	                   left: '29%',
	                   top: '40%',
	                   style: {
	                       //value当前进度
	                    //    text: "9998",
	                       textAlign: 'center',
	                       fill: '#19191A',
	                       fontSize: 34,
	                       fontWeight: 'bold'
	                   }
	               },
	               //第二行文字
	               //内容 + 位置
	               {
	                   type: 'text',
	                   left: '34%',
	                   top: '56%',
	                   style: {
	                       //maxValue进度条最大值
	                    //    text: '总收入',
	                       textAlign: 'center',
	                       fill: '#19191A',
	                       fontSize: 16
	                   }
	               }
	           ],
	           series: [ //系列列表
                    {
                        type: 'pie',
                        radius: ['80%', '70%'],//['外圆大小', '内圆大小']
                        center: ['60%', '50%'],//圆心位置['左右'， '上下']
                        hoverAnimation: false,//取消鼠标悬停动画
                        animationEasing: 'cubicOut',//设置动画缓动效果
                        //取消显示饼图自带数据线条
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label:{
						 show: false,
						 position: 'left'
					    },
                        //增加阴影效果
                        itemStyle: {
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
	                           label: {  //饼图图形上的文本标签
	                               show: false  //平常不显示
	                           },
	                           labelLine: {     //标签的视觉引导线样式
	                               show: false  //平常不显示
	                           }
	                       },
                        },
                        data: [
                            //(maxValue进度条最大值 - value当前进度) + 颜色
                            {
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: '#E0E0E0'
                                    }
                                },
                            },
				            //value当前进度 + 颜色
				            {
				                value: "{$lore_data.loreArticleCountViews}",
				                itemStyle: {
				                    normal: {
				                        color: '#5B78FFFF'
				                    }
				                },
                                // name : ''
				            },
                        ]
                    },
                    {
                        type: 'pie',
                        radius: ['50%', '40%'],//['外圆大小', '内圆大小']
                        center: ['60%', '50%'],//圆心位置['左右'， '上下']
                        hoverAnimation: false,//取消鼠标悬停动画
                        animationEasing: 'cubicOut',//设置动画缓动效果
                        //取消显示饼图自带数据线条
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label:{
						 show: false,
						 position: 'left'
					    },
                        //增加阴影效果
                        itemStyle: {
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
	                           label: {  //饼图图形上的文本标签
	                               show: false  //平常不显示
	                           },
	                           labelLine: {     //标签的视觉引导线样式
	                               show: false  //平常不显示
	                           }
	                       },
                        },
                        data: [
                            // 当月访问量
                            {
                                value: "{$lore_data.loreArticleMonthCountViews}",
                                itemStyle: {
                                    normal: {
                                        color: '#F74AFF'
                                    }
                                },
                                name: ''


                            },
				            // 当天访问量
				            {
				                value: "{$lore_data.loreArticleTodayCountViews}",
				                itemStyle: {
				                    normal: {
				                        color: '#E6A500FF'
				                    }
				                },
                                name: ''
				            },
                        ]
                    },

	           ]
            
	       };
	 myChart.setOption(option);
	 
	 // 社群案例数
	         var chartDom = document.getElementById('communityData');
	 	    var myChart = echarts.init(chartDom);
	 	    var option = {
	 	          title: '', 
	 			  tooltip: {
	                 trigger: 'item',
	 			  },
	 			   legend: {
	                     orient: 'vertical',
	 					top: '10%',
	 					left: '10%',
	                     // y:'center',
	                     itemWidth : 12,
	                     itemHeight : 12,
	                     itemGap: 25,
	                     textStyle:{
	                         color : '#000',
	                         fontWeight : 'bold',
	                         fontSize: 18,
	                         width:20,
	                         height:20,
	                         rich:{
	                             a: {
	                                 color: '#999',
	                                 lineHeight: 20,
	                             },
	                             b:{
	                                 fontSize:16
	                             }
	                         }
	                     }
	 				},
	 	        //    color: ['#5B78FFFF',  '#E6A500FF'],  //手动设置每个图例的颜色
	 	           //环形中间文字
	 	           graphic: [
	 	               //第一行文字
	 	               //内容 + 位置
	 	               {
	 	                   type: 'text',
	 	                   left: '29%',
	 	                   top: '40%',
	 	                   style: {
	 	                       //value当前进度
	 	                    //    text: "9998",
	 	                       textAlign: 'center',
	 	                       fill: '#19191A',
	 	                       fontSize: 34,
	 	                       fontWeight: 'bold'
	 	                   }
	 	               },
	 	               //第二行文字
	 	               //内容 + 位置
	 	               {
	 	                   type: 'text',
	 	                   left: '34%',
	 	                   top: '56%',
	 	                   style: {
	 	                       //maxValue进度条最大值
	 	                    //    text: '总收入',
	 	                       textAlign: 'center',
	 	                       fill: '#19191A',
	 	                       fontSize: 16
	 	                   }
	 	               }
	 	           ],
	 	           series: [ //系列列表
	                     {
	                         type: 'pie',
	                         radius: ['80%', '70%'],//['外圆大小', '内圆大小']
	                         center: ['60%', '50%'],//圆心位置['左右'， '上下']
	                         hoverAnimation: false,//取消鼠标悬停动画
	                         animationEasing: 'cubicOut',//设置动画缓动效果
	                         //取消显示饼图自带数据线条
	                         labelLine: {
	                             normal: {
	                                 show: false
	                             }
	                         },
	                         label:{
	 						 show: false,
	 						 position: 'left'
	 					    },
	                         //增加阴影效果
	                         itemStyle: {
	                             normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
	 	                           label: {  //饼图图形上的文本标签
	 	                               show: false  //平常不显示
	 	                           },
	 	                           labelLine: {     //标签的视觉引导线样式
	 	                               show: false  //平常不显示
	 	                           }
	 	                       },
	                         },
	                         data: [
	                             //(maxValue进度条最大值 - value当前进度) + 颜色
	                             {
	                                 value: 0,
	                                 itemStyle: {
	                                     normal: {
	                                         color: '#E0E0E0'
	                                     }
	                                 },
	                             },
	 				            //value当前进度 + 颜色
	 				            {
	 				                value: "{$case_data.caseArticleCountViews}",
	 				                itemStyle: {
	 				                    normal: {
	 				                        color: '#5B78FFFF'
	 				                    }
	 				                },
	                                 // name : ''
	 				            },
	                         ]
	                     },
	                     {
	                         type: 'pie',
	                         radius: ['50%', '40%'],//['外圆大小', '内圆大小']
	                         center: ['60%', '50%'],//圆心位置['左右'， '上下']
	                         hoverAnimation: false,//取消鼠标悬停动画
	                         animationEasing: 'cubicOut',//设置动画缓动效果
	                         //取消显示饼图自带数据线条
	                         labelLine: {
	                             normal: {
	                                 show: false
	                             }
	                         },
	                         label:{
	 						 show: false,
	 						 position: 'left'
	 					    },
	                         //增加阴影效果
	                         itemStyle: {
	                             normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
	 	                           label: {  //饼图图形上的文本标签
	 	                               show: false  //平常不显示
	 	                           },
	 	                           labelLine: {     //标签的视觉引导线样式
	 	                               show: false  //平常不显示
	 	                           }
	 	                       },
	                         },
	                         data: [
	                             // 当月访问量
	                             {
	                                 value: "{$case_data.caseArticleMonthCountViews}",
	                                 itemStyle: {
	                                     normal: {
	                                         color: '#F74AFF'
	                                     }
	                                 },
	                                 name: ''
	 
	 
	                             },
	 				            // 当天访问量
	 				            {
	 				                value: "{$case_data.caseArticleTodayCountViews}",
	 				                itemStyle: {
	 				                    normal: {
	 				                        color: '#E6A500FF'
	 				                    }
	 				                },
	                                 name: ''
	 				            },
	                         ]
	                     },
	 
	 	           ]
	             
	 	       };
	 	 myChart.setOption(option);

    // 企业微信
    let labels = "{$weChat_data.weChatArticleMonthLine.labels}";
    let datas = "{$weChat_data.weChatArticleMonthLine.datas}";
    let dataDay = labels.split(',');
    let dataValue = datas.split(',');
    let data1 = {
        labels: dataDay,
        datasets: [
            {
                label: "本月新增企业微信",
                backgroundColor: "#F9F6FF",
                borderWidth: 1,
                pointBackgroundColor: "#F2FBFF",
                pointBorderColor: "#F9F6FF",
                borderColor: "#F74AFF",
                pointRadius: 0,
                lineTension: 0,
                spanGaps: 5,
                data: dataValue
            }
        ]
    };
    new Chart(document.getElementById("post"), {
        type: 'line',
        data: data1,
        options: {
            title: {
                display: true,
            },
            legend: {display: false},
            splitLine: {show: false},
            elements: {
                line: {
                    tension: 0 // 禁用贝塞尔曲线
                }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: true,
                        color: "#F5F5F5",
                    },
                    // 负数处理
                    ticks: {
                        beginAtZero: true,
                        userCallback: function (label, index, labels) {
                            // when the floored value is the same as the value we have a whole number
                            if (Math.floor(label) === label) {
                                return label;
                            }
                        },
                    }
                }]
            }
        }
    });


    // 社群知识
    let labels2 = "{$lore_data.loreArticleMonthLine.labels}";
    let datas2 = "{$lore_data.loreArticleMonthLine.datas}";
    let dataDay2 = labels2.split(',');
    let dataValue2 = datas2.split(',');
    let data2 = {
        labels: dataDay2,
        datasets: [
            {
                label: "本月新增社群知识",
                backgroundColor: "#F9F6FF",
                borderWidth: 1,
                pointBackgroundColor: "#F2FBFF",
                pointBorderColor: "#F9F6FF",
                borderColor: "#F74AFF",
                pointRadius: 0,
                lineTension: 0,
                spanGaps: 5,
                data: dataValue2
            }
        ]
    };
    new Chart(document.getElementById("post1"), {
        type: 'line',
        data: data2,
        options: {
            title: {
                display: true,
            },
            legend: {display: false},
            splitLine: {show: false},
            elements: {
                line: {
                    tension: 0 // 禁用贝塞尔曲线
                }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: true,
                        color: "#F5F5F5",
                    },
                    // 负数处理
                    ticks: {
                        beginAtZero: true,
                        userCallback: function (label, index, labels) {
                            // when the floored value is the same as the value we have a whole number
                            if (Math.floor(label) === label) {
                                return label;
                            }
                        },
                    }
                }]
            }
        }
    });


    // 社群案例
    let labels3 = "{$case_data.caseArticleMonthLine.labels}";
    let datas3 = "{$case_data.caseArticleMonthLine.datas}";
    let dataDay3 = labels3.split(',');
    let dataValue3 = datas3.split(',');
    let data3 = {
        labels: dataDay3,
        datasets: [
            {
                label: "本月新增社群案例",
                backgroundColor: "#F9F6FF",
                borderWidth: 1,
                pointBackgroundColor: "#F2FBFF",
                pointBorderColor: "#F9F6FF",
                borderColor: "#F74AFF",
                pointRadius: 0,
                lineTension: 0,
                spanGaps: 5,
                data: dataValue3
            }
        ]
    };
    new Chart(document.getElementById("post2"), {
        type: 'line',
        data: data3,
        options: {
            title: {
                display: true,
            },
            legend: {display: false},
            splitLine: {show: false},
            elements: {
                line: {
                    tension: 0 // 禁用贝塞尔曲线
                }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: true,
                        color: "#F5F5F5",
                    },
                    // 负数处理
                    ticks: {
                        beginAtZero: true,
                        userCallback: function (label, index, labels) {
                            // when the floored value is the same as the value we have a whole number
                            if (Math.floor(label) === label) {
                                return label;
                            }
                        },
                    }
                }]
            }
        }
    });
</script>
<style>
    .card-dth {
        padding: 8px;
    }
    .fix-d {
        display: flex;
        justify-content: space-between;
        width: 86%;
        margin: auto;
    }
    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }
    .d-rigth {
        padding-top: 10px;
        text-align: -webkit-center;
    }
    .u-left {
        text-align: center;
    }
    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;
        font-family: 'AliM';
    }
    .bg-txt {
        display: flex;
        text-align: center;
    }
    .u-rig {
        display: flex;
        justify-content: space-between;
    }

    .u-left {
        text-align: center;
        margin-left: 20px;
    }

    .bg-txt {
        display: flex;
        text-align: center;
    }
    .k {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .h {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }

    .bg-str {
        margin-top: 6px;
        color: #000000;
        font-weight: bold;
        font-size: 16px;
    }

    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        width: 98%;
        margin: auto;
    }

    .rig-img {
        margin: 15px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .mt-top {
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .fnt-30 {
        font-size: 25px;
    }

    .mt5 {
        margin-top: 5px;
    }

    .color-total {
        background: #5B78FF !important;
    }

    .color-z {
        background: #E6A500 !important;
    }

    .color-y {
        background: #F74AFF !important;
    }

    .male {
        margin-top: 15px;
        display: inline-block;
        width: 72px;
    }

    .d-add {
        color: #000000;
        font-size: 18px;
        font-weight: 600;
        margin-top: 2px;
        margin-left: 6px;
    }
    .d-str {
        color: #999999;
    }
    .head-dfix {
        width: 100%;
        margin: auto;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
    }

    .dd-fix {
        display: flex;
        justify-content: space-between;
    }
    .z {
        background: #5B78FF;
    }
    .kuai {
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    .b {
        background: #48cda6;
    }

    .s {
        background: #8FDFFE;
    }
    .r {
        background: #E6A500;
    }
    .h {
        background: #FF6363;
    }
    .u {
        background: #fd87fb;
    }
</style>
</body>
</html>
